<template>
    <div class="repayment">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Repayment mode
            </div>
        </div>
        <!-- 内容 -->
        <div class="repayment-content">
            <div class="repayment-content-top">
                <div class="repayment-content-top-desc">Repayment amount</div>
                <div class="repayment-content-top-data">₹{{ $store.state.payMount }}</div>
            </div>
            <div class="repayment-content-desc">Choose your payment mode:</div>
            <div class="repayment-content-bottom">
                <div class="repayment-conent-bottom-desc">Please Choose</div>
                <div class="paystyle" @click="doClick">{{ payData.methodName }}</div>
            </div>
        </div>
    </div>
</template>
<script>
import { payMethods, getpayLinkAPI } from '../api'
import { jiami, jiemi } from "../utils/aeskey.js";
export default {
    data() {
        return {
            payData: {},
            goPay: {}
        }
    },
    methods: {
        //获取还款方式
        async getpayMethods() {
            const f = {
                model: {
                    orderId: ''
                }
            }
            f.model.orderId = this.$store.state.orderId
            const res = await payMethods(jiami(f))
            this.payData = jiemi(res.data).model.methods[0]
            console.log(jiemi(res.data), '还款方式')
            console.log(this.payData, 'payData')
        },
        //获取还款链接
        async getPayLink() {
            const r = {
                model: {
                    orderId: '',
                    repayMethod: '',
                    methodCode: '',
                    repayType: ''
                }
            }
            r.model.orderId = this.$store.state.orderId
            r.model.repayMethod = this.payData.methodName
            r.model.methodCode = this.payData.methodCode
            r.model.repayType = 'IMMEDIATE'
            console.log(r, '获取还款链接')
            const res = await getpayLinkAPI(jiami(r))
            const result = jiemi(res.data)
            console.log(result, '获取还款链接结果')
            this.goPay = result.model
        },
        //去付款
        doClick() {
            this.getPayLink()
            setInterval(() => {
                window.location.href = this.goPay.repayCode;
            }, 1000);
        }
    },
    created() {
        this.getpayMethods()
    },
    beforeMount() {
    },
}
</script>
<style lang="less" scoped>
@a: 3.75vw;

.repayment {
    width: 100vw;
    height: (667/@a);
    background-color: #f5f5f5;
    padding-top: (70/@a);
    box-sizing: border-box;

    .repayment-content {
        width: (330/@a);
        height: (212/@a);
        margin-left: (20/@a);


        .repayment-content-top {
            width: (330/@a);
            height: (75/@a);
            background: #9F3DFF;
            border-radius: (15/@a) (15/@a) 0px 0px;
            padding-top: (7/@a);
            box-sizing: border-box;

            .repayment-content-top-desc {
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-size: (12/@a);
                color: #FFFFFF;
                margin-left: (110/@a);
            }

            .repayment-content-top-data {
                margin-left: (118/@a);
                font-family: 'Inter';
                font-style: normal;
                font-weight: 700;
                font-size: (24/@a);
                color: #FFFFFF;
                margin-top: (10/@a);
            }
        }

        .repayment-content-desc {
            width: (330/@a);
            height: (32/@a);
            background-color: #e6e6e6;
            padding-left: (15/@a);
            line-height: (32/@a);
            box-sizing: border-box;
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (12/@a);
            color: #101010;
        }

        .repayment-content-bottom {
            width: (330/@a);
            height: (105/@a);
            background-color: #fff;
            border-radius: 0 0 (15/@a) (15/@a);

            .repayment-conent-bottom-desc {
                font-family: 'Inter';
                font-style: normal;
                font-weight: 700;
                font-size: (12/@a);
                color: #101010;
                margin-left: (15/@a);
                padding-top: (5/@a);
            }

            .paystyle {
                width: (85/@a);
                height: (30/@a);
                background: #9F3DFF;
                border-radius: (5/@a);
                margin-left: (15/@a);
                margin-top: (5/@a);
                text-align: center;
                line-height: (30/@a);
                font-family: 'Inter';
                font-style: normal;
                font-weight: 700;
                font-size: (12/@a);
                color: #FFFFFF;
            }
        }
    }

    //顶部
    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (100/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }
}
</style>